function compareImages() {
    const width = Math.min(canvas1.width, canvas2.width);
    const height = Math.min(canvas1.height, canvas2.height);

    diffCanvas.width = width;
    diffCanvas.height = height;

    diffCtx.imageSmoothingEnabled = true;
    diffCtx.imageSmoothingQuality = 'high';

    diffCtx.drawImage(canvas1, 0, 0);

    const imageData1 = ctx1.getImageData(0, 0, width, height);
    const imageData2 = ctx2.getImageData(0, 0, width, height);
    const diffImageData = diffCtx.getImageData(0, 0, width, height);

    let diffCount = 0;
    const threshold = 15;

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            
            const r1 = imageData1.data[i];
            const g1 = imageData1.data[i + 1];
            const b1 = imageData1.data[i + 2];
            
            const r2 = imageData2.data[i];
            const g2 = imageData2.data[i + 1];
            const b2 = imageData2.data[i + 2];

            const diffR = Math.abs(r1 - r2);
            const diffG = Math.abs(g1 - g2);
            const diffB = Math.abs(b1 - b2);

            if (diffR > threshold || diffG > threshold || diffB > threshold) {
                diffCount++;
                diffImageData.data[i] = 255;
                diffImageData.data[i + 1] = 0;
                diffImageData.data[i + 2] = 0;
                diffImageData.data[i + 3] = 255;

                if (x > 0 && x < width - 1 && y > 0 && y < height - 1) {
                    const top = ((y - 1) * width + x) * 4;
                    const bottom = ((y + 1) * width + x) * 4;
                    const left = (y * width + (x - 1)) * 4;
                    const right = (y * width + (x + 1)) * 4;

                    [top, bottom, left, right].forEach(pos => {
                        if (!isDifferent(pos)) {
                            diffImageData.data[pos] = 255;
                            diffImageData.data[pos + 1] = 255;
                            diffImageData.data[pos + 2] = 0;
                            diffImageData.data[pos + 3] = 255;
                        }
                    });
                }
            }
        }
    }

    function isDifferent(pos) {
        return diffImageData.data[pos] === 255 && 
               diffImageData.data[pos + 1] === 0 && 
               diffImageData.data[pos + 2] === 0;
    }

    diffCtx.putImageData(diffImageData, 0, 0);

    diffCtx.globalCompositeOperation = 'source-over';
    diffCtx.fillStyle = 'rgba(255, 255, 0, 0.15)';
    diffCtx.fillRect(0, 0, width, height);

    const totalPixels = width * height;
    const diffPercentage = (diffCount / totalPixels) * 100;
    
    debugInfo.innerHTML = '';
    log(`原始图片尺寸: ${width} x ${height} 像素`);
    log(`图片分辨率: ${(width * height / 1000000).toFixed(2)} 百万像素`);
    log(`发现差异: ${diffCount} 个像素`);
    log(`差异比例: ${diffPercentage.toFixed(2)}%`);
    if (diffCount > 0) {
        log('红色区域表示差异部分，黄色边框标注差异边界');
        log(`差异区域平均大小: ${(diffCount / (width * height) * 10000).toFixed(2)} 像素/万分比`);
    }
} 